import React, { Component } from 'react'
import {Link, withRouter} from 'react-router-dom'
import './index.less'
import { Menu, Icon } from 'antd';
import menuList from '../../config/menuConfig'
import memoryUtils from '../../utils/memoryUtils'

import logo from '../../asset/img/dog.png'

const { SubMenu } = Menu;

class LeftNav extends Component {

  hasAuth = (item) => {
    const {key, isPublic} = item
    const menus = memoryUtils.user.role.menus
    const username = memoryUtils.user.username
    /**
     * 1、如果当前用户是admin
     * 2、如果当前item是公开的
     * 3、当前用户有此item的权限：key有没有在menus中
     */
    if (username === 'admin' || isPublic || menus.indexOf(key)!==-1){
      return true
    } else if (item.children) { // 4、如果当前用户有此item的某个子item的权限
      return !!item.children.find(child => menus.indexOf(child.key)!==-1)
    }
    return false
  }

  /**
   * map遍历方法
   */
  getMenuNodes = (menuList) =>{
    const path = this.props.location.pathname
    return menuList.map(item =>{
      // 如果当前用户有itme对应的权限，才需要显示对应的菜单项
      if(this.hasAuth(item)) {
        if(!item.children) {
          return ((
            <Menu.Item key={item.key}>
                <Link to={item.key}>
                  <Icon type={item.icon} />
                  <span>{item.title}</span>
                </Link>
              </Menu.Item>
          ))
        } else {
          // 查找一个与当前请求路径匹配的子Item
          const zItem = item.children.find(zItem => zItem.key === path)
          // 如果存在，说明当前item的子列表需要打开
          if(zItem) {
            this.openKey = item.key
          }
          return((
            <SubMenu
              key={item.key}
              title={
                <span>
                  <Icon type={item.icon} />
                  <span>{item.title}</span>
                </span>
              }
            >
              {/* // 用递归法 */}
              {this.getMenuNodes(item.children)}
            </SubMenu>
          ))
        }
      }
    })
  }

  /**
   * reduce遍历方法
   */
  getMenuNodes_reduce = (menuList) => {
    const path = this.props.location.pathname
    return menuList.reduce((pre,item) => {
      // 向pre添加<Menu.Item />
       // 如果当前用户有itme对应的权限，才需要显示对应的菜单项
       if(this.hasAuth(item)) {
        if (!item.children) {
          pre.push((
            <Menu.Item key={item.key}>
                <Link to={item.key}>
                  <Icon type={item.icon} />
                  <span>{item.title}</span>
                </Link>
              </Menu.Item>
          ))
        } else {  
          // 查找一个与当前请求路径匹配的子Item
          const zItem = item.children.find(zItem => path.indexOf(zItem.key)===0)
          // 如果存在，说明当前item的子列表需要打开
          if(zItem) {
            this.openKey = item.key
          }
          pre.push((
            <SubMenu
              key={item.key}
              title={
                <span>
                  <Icon type={item.icon} />
                  <span>{item.title}</span>
                </span>
              }
            >
              {/* // 用递归法 */}
              {this.getMenuNodes_reduce(item.children)}
            </SubMenu>
          ))
        }
       }
      // 向pre添加<SubMenu />
      return pre
    },[])
  }
  menuNodes: any;
  openKey: any;
  props: any;

  /**
   * 在第一次render()执行
   * 为第一次render()做数据准备
   */
   UNSAFE_componentWillMount() {
    this.menuNodes = this.getMenuNodes_reduce(menuList)
  }


  render() {
    // 得到当前请求的路径
    let path = this.props.location.pathname
    if(path.indexOf('/product')===0) {
      path = '/product'
    }
    const openKey = this.openKey
    return (
      <div className="left-nav">
        <Link to='/'>
          <header className="left-nav-header">
            <img src={logo} alt="logo" />
            <h1>幻城后台</h1>
          </header>
        </Link>
        <div style={{ width: 200 }}>
        <Menu
          selectedKeys={[path]}
          defaultOpenKeys={[openKey]}
          mode="inline"
          theme="dark"
        >
          {
            this.menuNodes
          }
        </Menu>
      </div>
      </div>
    )
  }
}

/**
 * withRouter是高阶组件：
 * 包装非路由组件，返回一个新组件
 * 给非路由组件传递三个属性location/history/match
 */

export default withRouter(LeftNav)
